<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />  
<meta http-equiv="Pragma" content="no-cache" />  
<meta http-equiv="Expires" content="0" /> 
<meta charset="utf-8" name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>养修预约</title>
<link rel="stylesheet"
	href="../../components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet"
	href="../../components/datetimepicker/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet"
	href="../../components/bootstrapValidator/css/bootstrapValidator.css"
	type="text/css" />
<script type="text/javascript"
	src="../../components/jquery2.1.1/jquery.min.js"></script>
<script type="text/javascript"
	src="../../components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="../../components/datetimepicker/js/bootstrap-datetimepicker.js"
	charset="UTF-8"></script>
<script type="text/javascript"
	src="../../components/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"
	charset="UTF-8"></script>
<script type="text/javascript"
	src="../../components/bootstrapValidator/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="../../js/common/common.js"></script>
<script type="text/javascript" src="../../js/maintain/maintain.js"></script>

<style type="text/css">
.placeholders {
	margin-bottom: 30px;
	text-align: center;
}

.placeholders h4 {
	margin-bottom: 0;
}

.placeholder {
	margin-bottom: 20px;
}

.placeholder img {
	display: inline-block;
	border-radius: 50%;
}

.underline_model {
	padding-bottom: 5px;
	border-bottom: 1px solid #eee;
}

.center-vertical {
	margin-top: 25px;
}

.carousel-control.left {
	background-image: linear-gradient(to right, rgba(0, 0, 0, .0) 0,
		rgba(0, 0, 0, .0001) 100%);
}

.carousel-control.right {
	background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0,
		rgba(0, 0, 0, .0) 100%);
}
</style>


</head>
<body>
<div id="myTabContent" class="tab-content">	
	<div  id="maintainMainDiv" class="container formValidate  tab-pane fade" style="padding: 10px 10px 0px 10px"
		data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
		data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
		data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">


		<div class="row ">
			<div class="col-xs-5 col-sm-5">

				<div id="myCarInfos" class="carousel slide"></div>
			</div>
		</div>
		<div id="myCarInfoslinks" class="carousel slide"></div>
		<p>
		<p>
		<p>
		<form class="form-horizontal" role="form">
			<div class="form-group has-feedback">
				<label for="maintainType" class="col-sm-2 control-label">预约类型</label>
				<div class="col-sm-10">
					<select name="maintainType" id="maintainType" class="form-control" style="padding: 6px 40px">
						<option value="0" selected>保养</option>
						<option value="1">活动</option>
						<option value="2">维修</option>
						<option value="3">其他</option>
					</select>
				</div>
			</div>

			<p>
			<div class="form-group has-feedback">
				<label for="mileage" class="col-sm-2 control-label">当前里程</label>
				<div class="col-sm-10">
					<input type="text" name="mileage" id="mileage"
						style="padding: 6px 40px" class="form-control"
						placeholder="请输入当前里程" required data-bv-notempty-message="此项必填">
				</div>
			</div>

			<p>
			<div class="form-group has-feedback">
				<label for="seviceUser" class="col-sm-2 control-label">服务顾问</label>
				<div class="col-sm-10">
					<select name="seviceUser" id="seviceUser" class="form-control"
						style="padding: 6px 40px">
					</select>
				</div>
			</div>
			<p>
			<div class="form-group has-feedback">
				<label for="activeTime" class="col-sm-2 control-label">到店时间</label>
				<div class="col-sm-10">
					    <a id="selectMaintainTimeLink" class="list-group-item" href="#" onclick="selectMaintainTime(this)" style="padding: 6px 40px">
					    <span id="selectMaintainTimeSpan" class="glyphicon glyphicon-chevron-right form-control-feedback"></span>
							选择到店时间
					    </a>
				</div>
			</div>
			<!-- 隐藏的到店日期和到店时间，方便传递参数 -->
			<input type="hidden" id="maintainDate" name="maintainDate" value="">
			<input type="hidden" id="maintainTime" name="maintainTime" value="">
			
			<p>
			<div class="form-group has-feedback">
				<label for="maintainName" class="col-sm-2 control-label">联系人</label>
				<div class="col-sm-10">
					<input type="text" name="maintainName" id="maintainName"
						style="padding: 6px 40px" class="form-control"
						placeholder="请输入联系人" required data-bv-notempty-message="此项必填">
				</div>
			</div>
			<p>
			<div class="form-group has-feedback">
				<label for="phone" class="col-sm-2 control-label">手机号码</label>
				<div class="col-sm-10">
					<input type="text" name="phone" id="phone"
						style="padding: 6px 40px" class="form-control"
						placeholder="请输入手机号码" required data-bv-notempty-message="此项必填">
				</div>
			</div>

			<div class="form-group has-feedback">
				<div class="col-sm-12">
					<textarea name="comment" id="comment" class="form-control" rows="6"
						style="padding: 6px 40px" class="form-control"
						placeholder="输入您要提交的内容"></textarea>
				</div>
			</div>

			<p>
			<p>
			<p>
			<p>
				<button id="immediatelyAppoint" type="button"
					class="btn btn-success btn-block">预约</button>
			<p>
				<input type="hidden" id="openId" name="openId"
					value="123456732"> <input type="hidden" id="openId"
					name="openId" value="ssss"> <input type="hidden"
					id="dealerCode" name="dealerCode" value="dealerCode"> <input
					type="hidden" id="brandCode" name="brandCode" value="12"> <input
					type="hidden" id="serviceAdvisorCode" name="serviceAdvisorCode"
					value="1233454">
					
			</form>		
		</div>
	</div>
	
	<!-- 选择养修预约时间--二级页面 -->
	<div id="maintainDateSelDiv" class="container tab-pane fade">
		<p>
		<div class="input-group input-group-lg">
			<span class="input-group-addon">选择保养日期</span>
			<input id="maintainDateSelectText" size="16" type="text"  value=""  data-date-format="yyyy-mm-dd"
                 placeholder="选择日期" class="form-control datetime input-sm" onchange=changeDatePickText(this)>
		</div>
		<br>
		
		<div class="input-group input-group-lg">
			<span class="input-group-addon">选择保养时间</span>
			<label id="maintainTimeSelectLabel" class="form-control"></label>
		</div>

		 
		<div id="timeSelectRadioGroup" class="input-group input-group-lg" style="font-size: 18px;">
		<!-- 
				<input type="radio" name="timeSelectRadio" id="optionsRadios2"  value="timeSelectRadio1">
				<label id="timeSelectRadio1label">08:00 ~ 09:30</label>
				<br>
				<input type="radio" name="timeSelectRadio" id="optionsRadios2" value="timeSelectRadio2">
				<label id="timeSelectRadio2label">09:00 ~ 10:30</label>
				 -->
		</div>
		<br>
		<p>
			<button id="timeConfirmBtn" type="button" class="btn btn-primary btn-lg btn-block" onclick="confirmMaintainTime(this)">确定</button>
		<p>
		
		<div id="maintainInputErrDiv" class="container tab-pane fade">
			<div id="maintainInputErrLabel" class="alert alert-danger"></div>
		</div>
	</div>
	<script type="text/javascript">
		$("#myCarInfos").carousel('pause');

		$("#myCarInfoslinks").carousel('pause');

		$('.form_datetime').datetimepicker({
			language : 'zh-CN',
			weekStart : 1,
			todayBtn : 1,
			autoclose : 1,
			todayHighlight : 1,
			startView : 2,
			forceParse : 0,
			showMeridian : 1
		});

		function validat() {
			$('.formValidate').bootstrapValidator('validate');
			var isValid = $(".formValidate").data("bootstrapValidator")
					.isValid();

			/*      if(!isValid){
			     	return false;
			     } */
			return isValid;

		}
	</script>
</body>
</html>